<template>
    <div>
        <el-header style="background-color:#68B0AB;height: 60px;">

            <el-menu
                    :default-active="activeIndex2"
                    class="el-menu-demo"
                    mode="horizontal"
                    @select="handleSelect"
                    background-color="#68B0AB"
                    text-color="#fff"
                    style="padding-left: 20px"
                    active-text-color="#ffd04b">
                <el-menu-item >
                    <div >
                        <img :src=logoImage style="width: 100px;height: 65px;">
                    </div>
                </el-menu-item>
                <el-menu-item index="1"><i class="el-icon-s-home"></i>主页</el-menu-item>
                <el-menu-item index="2"><i class="el-icon-orange"></i>社区动态</el-menu-item>
                <el-menu-item index="3"><i class="el-icon-discover"></i>公益活动</el-menu-item>
                <el-menu-item index="4" style="margin-left: 320px">
                    <i class="el-icon-user-solid"></i>个人中心
                </el-menu-item>
            </el-menu>
        </el-header>
    </div>

</template>

<script>
    export default {
        name: "Header",
        data(){
            return{
                activeIndex2: '1',
                logoImage:require("../assets/bgc/logo.png"),
            }
        },

        methods:{
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
                if (key == 1){
                    this.$router.push("/");
                }else if (key == 2){
                    this.$router.push("/forum");
                }else if (key == 3){
                    this.$router.push("/sport");
                }else if(key == 4){
                    if(localStorage.hasOwnProperty("userID") || localStorage.hasOwnProperty("YiBanUserId")){
                        this.$router.push("/user");
                    }else {
                        this.$router.push('/login');
                    }
                }else {
                    console.log("请点击其他选项")
                }
            },
        }
    }
</script>

<style scoped>

</style>